<template>
  <div id="search">
    <!-- 头部导航栏 -->
    <van-nav-bar :title="$route.meta.title" fixed />

    <!-- 搜索框 -->
    <!-- shape设置圆角,
    clearable出现取消按钮, 
    action-text取消文本,
    show-action展示取消文本
    点击取消时跳转到首页
    聚焦展示标签,失焦展示歌曲列表
    -->
    <van-search
      v-if="HotWordsList.length"
      v-model.lazy="value"
      shape="round"
      :placeholder="HotWordsList[0].first"
      clearable
      action-text
      show-action
      @cancel="$router.push({ name: 'home' })"
      @focus="SwitchKeywords = false"
      @search="searchResult(value)"
      @clear="SwitchKeywords = true"
    />
      <!-- @input="searchResult(value)" -->

    <!-- 热门搜索和最佳匹配切换 -->
    <van-panel title=" " :desc="SwitchKeywords?'最佳匹配':'最热搜索'"> </van-panel>

    <!-- 音乐列表 -->
    <van-cell-group v-if="SwitchKeywords">
      <van-cell
        center
        :title="item.name"
        :label="item.ar[0].name + '-' + item.name"
        v-for="item in searchList"
        :key="item.id"
        @click="PlayMusic(item.id)"
      >
        <template #right-icon>
          <van-icon name="play-circle-o" size="0.8rem" />
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 搜索时出现的热点词模块 -->
    <div class="hot_name_wrap" v-else>
      <!-- 每个搜索关键词 -->
      <span
        class="hot_item"
        v-for="(item, index) in HotWordsList"
        :key="index"
        @click="searchResult(item.first)"
        >{{ item.first }}</span
      >
    </div>
  </div>
</template>

<script>
import { GetHotKeywordsAPI, searchResultAPI, PlayMusicAPI } from "@/api";
export default {
  name: "Search",
  data() {
    return {
      value: "", // 搜索框的值
      SwitchKeywords: true, //控制列表和热搜词的变量
      HotWordsList: [], // 装热搜词的变量
      searchList: [], // 装歌曲列表的变量
    };
  },
  created() {
    // 初次进入时获取热词
    this.GetHotKeywords();
  },
  methods: {
    // 获取热搜关键词
    async GetHotKeywords() {
      const { data: res } = await GetHotKeywordsAPI();
      // console.log(res);
      this.HotWordsList = res.result.hots;

      // 根据热搜词的第一个值  调用热搜列表的函数.渲染列表
     await this.searchResult(res.result.hots[0].first)
    },

    // 根据热搜词,获取热搜列表
    async searchResult(keywords) {
      const { data: res } = await searchResultAPI({ keywords });
      // console.log(res);

      // 判断请求过来的数据是否有
      if(res.result.songs.length) this.searchList = res.result.songs;
      else this.searchList =[]

      this.SwitchKeywords = true;
      this.value = "";
    },

    // 点击播放音乐,获取id 发送请求
    async PlayMusic(id) {
      const { data: res } = await PlayMusicAPI({ id });
      window.location.href = res.data[0].url;
    },
  },
};
</script>

<style lang="less" scoped>
/* 搜索容器的样式 */
// .search_wrap {
//   padding: 0.266667rem;
// }

// /*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

// /* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

// /* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>